<template>
    <div id="global_com-loading_prompt" v-if="checking">
        <h1>正在校验用户信息，请稍后</h1>
        <h3>{{ time.toFixed(1) }}s</h3>
    </div>
</template>

<script lang="ts" setup>
import axios from '@/utils/network/axios'
import { useMainStore } from '@/utils/store'
import type { AxiosResponse } from 'axios'
import { useLoadingBar, useMessage } from 'naive-ui'
import { ref, onMounted, onBeforeUnmount } from 'vue'
const store = useMainStore()
const message = useMessage()
const checking = ref(true)

const loadingBar = useLoadingBar()

const time = ref(0)
const timer = setInterval(() => {
    time.value += 0.1
}, 100)

async function handleChecking() {
    axios
        .get('/checkin')
        .then((response: AxiosResponse) => {
            if (response.data.status == 200) {
                store.app.initlized = true
                emit('need_login', false)
            } else {
                message.info(response.data.text)
                emit('need_login', true)
            }
        })
        .catch((error) => {
            emit('need_login', true)
        })
        .finally(() => {
            loadingBar.finish()
            clearInterval(timer)
        })
}
//////////////////////////////////////
const emit = defineEmits(['need_login'])
onMounted(async () => {
    loadingBar.start()
    handleChecking()
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<style lang="scss" scoped>
#global_com-loading_prompt {
    margin-top: 20vh;
    text-align: center;

    h1 {
        font-size: 1.25rem;
    }
}
</style>
